<template>
	<view>
		<view class="tasktree-box" v-for="(item,index) in tasktreeList" :key="item.shrinkType">
			<tasktreecard :info="item" shrink @shrinkTypeChange="shrinkTypeChange" :shrinkType="item.shrinkType" :index="index" @tap="jumpTask"></tasktreecard>
			<view class="son-box" v-for="(it,idx) in item.subTask" :key="idx">
				<tasktreecard shrink v-if="item.shrinkType == true" :info="it" :index="idx" :indextwo="index" @shrinkTypeChange="sonshrinkTypeChange" :shrinkType="it.shrinkType" @tap="jumpTask"></tasktreecard>
				<view class="grandson-box" v-for="(itm,ide) in it.subTask" :key="ide">
					<tasktreecard v-if="item.shrinkType == true && it.shrinkType == true" :info="itm" @tap="jumpTask"></tasktreecard>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import * as api from '@/utils/api.js';
	import tasktreecard from '../card/tasktreecard.vue';
	export default {
		components:{
			tasktreecard
		},
		props:{
			info:{
				type:Object,
				default:{}
			}
		},
		data() {
			return {
				apiinfo:{
					currentPage:1,
					id:null,
					pageSize:15,
					type:0
				},
				tasktreeList:[],
			}
		},
		mounted(){
			this.apiinfo.id = this.info.taskId;
			this.queryTaskTreePage();
		},
		methods: {
			/**
			 * 任务树列表
			 */
			queryTaskTreePage:function(){
				let tasktreeList = this.tasktreeList;
				api.queryTaskTreePage(this.apiinfo).then(res=>{
					
					res.data.result.list.forEach((item,index)=>{
						this.$set(item,"shrinkType",false)
						item.subTask.forEach((it,idx)=>{
							this.$set(it,"shrinkType",false)
						})
					})
					
					tasktreeList.push.apply(tasktreeList,res.data.result.list);
					
					this.tasktreeList = tasktreeList;
				})
			},
			
			/**
			 * 爷辈收缩触发事件
			 */
			shrinkTypeChange:function(data){
				let index = data.index;
				let tasktreeList = this.tasktreeList;
				this.$set(this.tasktreeList[index],'shrinkType',!tasktreeList[index].shrinkType);
			},
			/**
			 * 父辈收缩触发事件
			 */
			sonshrinkTypeChange:function(data){
				let index = data.index;
				let idx = data.indextwo;
				let tasktreeList = this.tasktreeList;
				this.$set(this.tasktreeList[idx].subTask[index],'shrinkType',!tasktreeList[idx].subTask[index].shrinkType);
			},
			/**
			 * 跳转至任务详情页面
			 */
			jumpTask:function(item){
				uni.navigateTo({
					url: '/pages/mask/detail/detail?id='+ item.id
				});
			},
		}
	}
</script>

<style lang="scss" scoped>
	.tasktree-box{
		background-color: white;
		box-sizing: border-box;
		padding:0 10rpx;
		margin:20rpx;
	}
	.son-box{
		margin-left: 20rpx;
	}
</style>
